<template>
	<div>
		<div class="learn-record-table">
			<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" max-height="580">
				<el-table-column prop="i" label="序号" fit width="80" fixed></el-table-column>
				<el-table-column prop="title" label="标题" fit ></el-table-column>
				<el-table-column prop="userName" label="用户名" fit ></el-table-column>
				<el-table-column label="状态" fit>
					<template slot-scope="scope">
						<span v-if="scope.status === 0" style="color: #ff0000 ;">未学习</span>
						<span v-else style="color: #00ff00 ;">已学习</span>
					</template>
				</el-table-column>
				<el-table-column prop="completeTime" label="完成时间" fit></el-table-column>
<!-- 				<el-table-column label="操作" width="100" fixed="right">
					<template slot-scope="scope">
						<div style="display: flex">
							<el-button @click="editGoods(scope.row)" type="text" size="mini">
								详情
							</el-button>
							<el-divider direction="vertical"></el-divider>
							<el-button @click="deleteGoods(scope.row.id)" type="text" size="mini">
								删除
							</el-button>
						</div>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[10, 20, 50]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import apiURL from '../../../api/apiURL'
import api from '../../../api/companyCulture.js'
	export default{
		data() {
			return{
				// 表格加载
				loading: false,
				//表格数据
				tableData: [],
				// 总条数
				total: 0,
				// 当前页数
				currentPage: 1,
				// 分页大小
				pageSize: 10,
			}
		},
		mounted() {
			this.getLearnRecordList
		},
		methods:{
			// pageSize变化
			handleSizeChange(pageSize) {
				this.pageSize = pageSize

			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.currentPage = curPage

			},
			// 获取数据
			getLearnRecordList(){
				// let data = {
				// 	currentPage: this.currentPage,
				// 	pageSize: this.pageSize
				// }
				// api.getLearnRecordList(data).then(res => {
				// 	if(res.code === 200){
				// 		console.log("res.data===>",res.data)
				// 	}
				// })
			}
		}
	}
</script>

<style scoped>
	.page {
		text-align: center;
	}

	.learn-record-table {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
</style>